<script setup lang="ts">
import { useDictOptionStore, useMainInfoStore } from '@/stores'
import type { Enterprise } from '@/stores/modules/main-info/helper'
import type { FormInstance, FormRules } from 'element-plus'
import { reactive, ref, watch } from 'vue'

// Receive parent data
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  id: {
    type: Number,
    required: false
  },
  boxType: {
    type: String,
    required: false
  }
})

// Get store object
const mainInfoStore = useMainInfoStore()
const dictOptionStore = useDictOptionStore()

// Init form default data
const _defaultData = {
  enterpriseName: '',
  principalType: null,
  industry: null,
  address: '',
  registrationDate: new Date()
}

// Create variable for responsive
const title = ref()
const ruleFormRef = ref()
const data = ref<Enterprise>(_defaultData)

// Register parent events
const emits = defineEmits(['save', 'cancel'])

// Watch variable for parent data
watch(
  () => props.show,
  async (newValue: boolean) => {
    if (newValue) {
      // If is to "modify" the fetch remote data
      if (props.boxType === 'modify' && props.id) {
        await handleFetchRemoteData(props.id)
        title.value = data.value.enterpriseName
      }
    }
  }
)

// Fetch remote data
const handleFetchRemoteData = async (id: number) => {
  data.value = await mainInfoStore.queryById(id)
}

const handleCancel = () => {
  data.value = _defaultData
  emits('cancel')
}

const handleSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      emits('save', data.value)
      handleCancel()
    }
  })
}

// Rules
const rules = reactive<FormRules>({
  enterpriseName: [
    { required: true, message: '请输入主体名称', trigger: 'blur' },
    { min: 3, max: 20, message: '主体名称字符长度在3~20以内', trigger: 'blur' }
  ]
})
</script>

<template>
  <el-dialog
    :title="$props.id ? `编辑【${title}】` : `新增`"
    width="50%"
    destroy-on-close
    v-model="$props.show"
    :show-close="false"
    :close-on-click-modal="false"
    @close="handleCancel"
  >
    <el-form :model="data" label-width="120px" :loading="true" :rules="rules" ref="ruleFormRef">
      <el-form-item label="主体名称" prop="enterpriseName">
        <el-input v-model="data.enterpriseName" />
      </el-form-item>
      <el-form-item label="主体类型" required>
        <el-select v-model="data.principalType" placeholder="请选择主体类型">
          <el-option
            v-for="(item, index) in dictOptionStore.dictOption?.principalType?.children"
            :key="index"
            :label="item.dictName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属行业" required>
        <el-select v-model="data.industry" placeholder="请选择所属行业">
          <el-option
            v-for="(item, index) in dictOptionStore.dictOption?.industry?.children"
            :key="index"
            :label="item.dictName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="地址" required>
        <el-input v-model="data.address" type="textarea" />
      </el-form-item>
      {{ data.registrationDate }}
      <el-form-item label="注册日期" required>
        <el-date-picker
          v-model="data.registrationDate"
          type="date"
          placeholder="请选择注册日期"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSave(ruleFormRef)"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.el-select {
  width: 100%;
}
</style>
